<template>
    <div>
        <div style="display: flex;justify-content: space-between">
            <div>
                <el-input style="width: 300px;margin-right: 8px"
                          placeholder="请输入员工名进行搜索。。。"
                          prefix-icon="el-icon-search"
                          clearable @clear="initEmps"
                          v-model="empName" @keydown.enter.native="initEmps"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="initEmps">搜索</el-button>
                <el-button type="primary">
                    <i class="fa fa-angle-double-down" aria-hidden="true"></i>
                    高级搜索</el-button>
            </div>
            <div>
                <el-button type="success" @click="exportData">
                    <i class="fa fa-level-up" aria-hidden="true"></i>
                    导出数据
                </el-button>
                <el-upload
                        style="display: inline-flex;margin: 8px"
                        :show-file-list="false"
                        action="https://jsonplaceholder.typicode.com/posts/">
                    <el-button type="success">
                        <i class="fa fa-level-down" aria-hidden="true"></i>
                        导入数据
                    </el-button>
                </el-upload>
                <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
            </div>
        </div>
        <div style="margin-top: 10px">
            <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    :data="emps"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        align="left"
                        width="90"
                        fixed>
                </el-table-column>
                <el-table-column
                        prop="workID"
                        label="工号"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="birthday"
                        label="出生日期"
                        align="left"
                        width="95">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="身份证号"
                        align="left"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="wedlock"
                        label="婚姻状况"
                        align="left"
                        width="75">
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        label="民族"
                        align="left"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="nativePlace"
                        label="籍贯"
                        align="left"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="politicsStatus.name"
                        label="政治面貌"
                        align="left"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="电子邮件"
                        align="left"
                        width="170">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        align="left"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="联系地址"
                        align="left"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        label="所属部门"
                        align="left"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="position.name"
                        label="职位"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="engageForm"
                        label="聘用形式"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="tiptopDegree"
                        label="最高学历"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="school"
                        label="毕业院校"
                        align="left"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="specialty"
                        label="专业"
                        align="left"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="workState"
                        label="在职状态"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="beginDate"
                        label="入职日期"
                        align="left"
                        width="95">
                </el-table-column>
                <el-table-column
                        prop="conversionTime"
                        label="转正日期"
                        align="left"
                        width="95">
                </el-table-column>
                <el-table-column
                        prop="beginContract"
                        label="合同起始日期"
                        align="left"
                        width="95">
                </el-table-column>
                <el-table-column
                        prop="endContract"
                        label="合同截止日期"
                        align="left"
                        width="95">
                </el-table-column>
                <el-table-column
                        label="合同期限"
                        align="left"
                        width="95">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.contractTerm}}年</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="200"
                        fixed="right">
                    <template slot-scope="scope">
                        <el-button style="padding: 3px" @click="showEditEmpView(scope.row)">编辑</el-button>
                        <el-button style="padding: 3px" type="primary">查看高级资料</el-button>
                        <el-button style="padding: 3px" type="danger" @click="deleteEmp(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px">
                <el-pagination
                        background
                        layout='sizes,prev, pager, next, jumper, ->, total'
                        :total="total"
                        @current-change="currentChange"
                        @size-change="sizeChange">
                </el-pagination>
            </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <el-form ref="empForm" :model="emp" :rules="rules">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="姓名：" prop="name">
                                <el-input size="mini" style="width: 160px"
                                          prefix-icon="el-icon-edit"
                                          v-model="emp.name" placeholder="请输入员工姓名。。。">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别：" prop="gender">
                                <el-radio-group v-model="emp.gender" style="margin-top: 8px">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出生日期：" prop="birthday">
                                <el-date-picker
                                        v-model="emp.birthday"
                                        type="date"
                                        size="mini"
                                        style="width: 160px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="政治面貌：" prop="politicId">
                                <el-select size="mini" style="width: 160px" v-model="emp.politicId" placeholder="政治面貌">
                                    <el-option
                                            v-for="item in politicsstatus"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="民族：" prop="nationId">
                                <el-select size="mini" style="width: 160px" v-model="emp.nationId" placeholder="民族">
                                    <el-option
                                            v-for="item in nations"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="籍贯：" prop="nativePlace">
                                <el-input v-model="emp.nativePlace"
                                          placeholder="请输入籍贯。。。"
                                          prefix-icon="el-icon-edit" size="mini"
                                          style="width: 160px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电子邮件：" prop="email">
                                <el-input v-model="emp.email"
                                          placeholder="请输入电子邮件。。。"
                                          prefix-icon="el-icon-message" size="mini"
                                          style="width: 160px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="电话号码：" prop="phone">
                                <el-input v-model="emp.phone"
                                          placeholder="请输入电话。。。"
                                          prefix-icon="el-icon-phone" size="mini"
                                          style="width: 160px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="地址：" prop="address">
                                <el-input v-model="emp.address"
                                          placeholder="请输入地址。。。"
                                          prefix-icon="el-icon-edit" size="mini"
                                          style="width: 160px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="职位：" prop="posId">
                                <el-select size="mini" style="width: 160px" v-model="emp.posId" placeholder="职位">
                                    <el-option
                                            v-for="item in positions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="身份证号：" prop="idCard">
                                <el-input v-model="emp.idCard"
                                          placeholder="请输入身份证号。。。"
                                          prefix-icon="el-icon-edit" size="mini"
                                          style="width: 160px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="所属部门：" prop="departmentId">
                                <el-popover
                                        placement="bottom"
                                        title="所属部门"
                                        width="200"
                                        trigger="manual"
                                        v-model="visible">
                                    <el-tree
                                            default-expand-all
                                            :data="allDeps" :props="defaultProps"
                                            @node-click="handleNodeClick"></el-tree>
                                    <div slot="reference" style="width: 160px;display: inline-flex;border: 1px solid #dedede;
                                     height: 28px;border-radius: 5px;cursor: pointer;align-items: center;
                                     font-size: 13px;padding-left: 8px;box-sizing: border-box"
                                         @click="showDepView">{{inputDepName}}</div>
                                </el-popover>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="专业：" prop="specialty">
                                <el-input v-model="emp.specialty"
                                          placeholder="请输入专业。。。"
                                          prefix-icon="el-icon-edit" size="mini"
                                          style="width: 160px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="职称：" prop="jobLevelId">
                                <el-select size="mini" style="width: 160px" v-model="emp.jobLevelId" placeholder="选择职称">
                                    <el-option
                                            v-for="item in joblevels"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="婚姻状况：" prop="wedlock">
                                <el-radio-group v-model="emp.wedlock" style="margin-top: 8px">
                                    <el-radio label="已婚">已婚</el-radio>
                                    <el-radio label="未婚">未婚</el-radio>
                                    <el-radio label="离异">离异</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="最高学历：" prop="tiptopDegree">
                                <el-select size="mini" style="width: 160px" v-model="emp.tiptopDegree" placeholder="最高学历">
                                    <el-option
                                            v-for="item in tiptopDegree"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="入职日期：" prop="beginDate">
                                <el-date-picker
                                        v-model="emp.beginDate"
                                        type="date"
                                        size="mini"
                                        style="width: 160px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="入职日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="转正日期：" prop="conversionTime">
                                <el-date-picker
                                        v-model="emp.conversionTime"
                                        type="date"
                                        size="mini"
                                        style="width: 160px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="转正日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="聘用形式：" prop="engageForm">
                                <el-radio-group v-model="emp.engageForm" style="margin-top: 8px">
                                    <el-radio label="劳动合同">劳动合同</el-radio>
                                    <el-radio label="劳务合同">劳务合同</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="毕业院校：" prop="school">
                                <el-input v-model="emp.school"
                                          placeholder="请输入毕业院校。。。"
                                          prefix-icon="el-icon-edit" size="mini"
                                          style="width: 160px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="工号：" prop="workID">
                                <el-input v-model="emp.workID"
                                          disabled
                                          placeholder="请输入工号。。。"
                                          prefix-icon="el-icon-edit" size="mini"
                                          style="width: 160px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">

                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同起始日期：" prop="beginContract">
                                <el-date-picker
                                        v-model="emp.beginContract"
                                        type="date"
                                        size="mini"
                                        style="width: 160px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="合同起始日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同截止日期：" prop="endContract">
                                <el-date-picker
                                        v-model="emp.endContract"
                                        type="date"
                                        size="mini"
                                        style="width: 160px"
                                        value-format="yyyy-MM-dd"
                                        placeholder="合同截止日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addEmp">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data(){
            return{
                title:'',
                allDeps:[],
                defaultProps:{
                    children: 'children',
                    label: 'name'
                },
                inputDepName:'',
                visible:false,
                emps:[],
                loading:false,
                total:0,
                currentPage:1,
                size:10,
                empName:'',
                dialogVisible:false,
                nations:[],
                joblevels:[],
                politicsstatus:[],
                positions:[],
                tiptopDegree:['博士','硕士','本科','大专','高中','初中','小学','其他'],
                emp:{
                    id:null,
                    name: '',
                    gender: '',
                    birthday: '',
                    idCard: '',
                    wedlock: '',
                    nationId: null,
                    nativePlace: '',
                    politicId: null,
                    email: '',
                    phone: '',
                    address: '',
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '',
                    tiptopDegree: '',
                    specialty: '',
                    school: '',
                    beginDate: '',
                    workState: '在职',
                    workID: '',
                    contractTerm: null,
                    conversionTime: '',
                    notWorkDate: null,
                    beginContract: '',
                    endContract: '',
                    workAge: null,
                    salaryId: '2'
                },
                rules:{
                    name: [{required:true,message:'请输入用户名',trigger:'blur'}],
                    gender: [{required:true,message:'请输入员工性别',trigger:'blur'}],
                    birthday: [{required:true,message:'请输入出生日期',trigger:'blur'}],
                    idCard: [{required:true,message:'请输入身份证号',trigger:'blur'}],
                    wedlock: [{required:true,message:'请输入婚姻状态',trigger:'blur'}],
                    nationId: [{required:true,message:'请输入民族',trigger:'blur'}],
                    nativePlace: [{required:true,message:'请输入籍贯',trigger:'blur'}],
                    politicId: [{required:true,message:'请输入政治面貌',trigger:'blur'}],
                    email: [{required:true,message:'请输入邮箱',trigger:'blur'},
                        {type:'email',message:'邮箱格式不正确',trigger:'blur'}],
                    phone: [{required:true,message:'请输入电话号码',trigger:'blur'}],
                    address: [{required:true,message:'请输入员工地址',trigger:'blur'}],
                    departmentId: [{required:true,message:'请输入部门名称',trigger:'blur'}],
                    jobLevelId: [{required:true,message:'请输入职称',trigger:'blur'}],
                    posId: [{required:true,message:'请输入职位',trigger:'blur'}],
                    engageForm: [{required:true,message:'请输入聘用形式',trigger:'blur'}],
                    tiptopDegree: [{required:true,message:'请输入学历',trigger:'blur'}],
                    specialty: [{required:true,message:'请输入专业',trigger:'blur'}],
                    school: [{required:true,message:'请输入毕业院校',trigger:'blur'}],
                    beginDate: [{required:true,message:'请输入入职日期',trigger:'blur'}],
                    workState: [{required:true,message:'请输入工作状态',trigger:'blur'}],
                    workID: [{required:true,message:'请输入工号',trigger:'blur'}],
                    contractTerm: [{required:true,message:'请输入合同期限',trigger:'blur'}],
                    conversionTime: [{required:true,message:'请输入转正日期',trigger:'blur'}],
                    notWorkDate: [{required:true,message:'请输入离职日期',trigger:'blur'}],
                    beginContract: [{required:true,message:'请输入合同起始日期',trigger:'blur'}],
                    endContract: [{required:true,message:'请输入合同截止日期',trigger:'blur'}],
                    workAge: [{required:true,message:'请输入工龄',trigger:'blur'}],
                }
            }
        },
        mounted() {
            this.initEmps();
            this.initData();
        },
        methods:{
            exportData(){
                this.downloadRequest('/employee/basic/export');
            },
            showEditEmpView(data){
                this.title = '编辑员工';
                this.inputDepName = data.department.name;
                this.emp = data;
                this.initPositions();
                this.dialogVisible = true;
            },
            deleteEmp(data){
                this.$confirm('此操作将永久删除['+data.name+']员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/employee/basic/'+data.id).then(resp=>{
                        if (resp){
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addEmp(){
                if (this.emp.id){
                    this.$refs['empForm'].validate(valid=>{
                        if (valid){
                            this.putRequest('/employee/basic/',this.emp).then(resp=>{
                                if (resp){
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                }else {
                    this.$refs['empForm'].validate(valid=>{
                        if (valid){
                            this.postRequest('/employee/basic/',this.emp).then(resp=>{
                                if (resp){
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                }
            },
            handleNodeClick(data){
                this.inputDepName = data.name;
                this.emp.departmentId = data.id;
                this.visible = !this.visible;
            },
            showDepView(){
                this.visible = !this.visible
            },
            getMaxWordId(){
                this.getRequest('/employee/basic/maxWorkID').then(resp=>{
                    if (resp){
                        this.emp.workID = resp.obj;
                    }
                })
            },
            initPositions(){
                this.getRequest('/employee/basic/positions').then(resp=>{
                    if (resp){
                        this.positions = resp
                    }
                })
            },
            initData(){
                if (!window.sessionStorage.getItem('nations')){
                    this.getRequest('/employee/basic/nations').then(resp=>{
                        if(resp){
                            this.nations = resp;
                            window.sessionStorage.setItem('nations',JSON.stringify(resp));
                        }
                    })
                }else {
                    this.nations = JSON.parse(window.sessionStorage.getItem('nations'));
                }
                if (!window.sessionStorage.getItem('joblevels')){
                    this.getRequest('/employee/basic/joblevels').then(resp=>{
                        if(resp){
                            this.joblevels = resp;
                            window.sessionStorage.setItem('joblevels',JSON.stringify(resp));
                        }
                    })
                }else {
                    this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'));
                }
                if (!window.sessionStorage.getItem('politicsstatus')){
                    this.getRequest('/employee/basic/politicsstatus').then(resp=>{
                        if(resp){
                            this.politicsstatus = resp;
                            window.sessionStorage.setItem('politicsstatus',JSON.stringify(resp));
                        }
                    })
                }else {
                    this.politicsstatus = JSON.parse(window.sessionStorage.getItem('politicsstatus'));
                }
                if (!window.sessionStorage.getItem('allDeps')){
                    this.getRequest('/employee/basic/deps').then(resp=>{
                        if(resp){
                            this.allDeps = resp;
                            window.sessionStorage.setItem('allDeps',JSON.stringify(resp));
                        }
                    })
                }else {
                    this.allDeps = JSON.parse(window.sessionStorage.getItem('allDeps'));
                }
            },
            showAddEmpView(){
                this.title = '添加员工';
                this.emp = {
                        id:null,
                        name: '',
                        gender: '',
                        birthday: '',
                        idCard: '',
                        wedlock: '',
                        nationId: null,
                        nativePlace: '',
                        politicId: null,
                        email: '',
                        phone: '',
                        address: '',
                        departmentId: null,
                        jobLevelId: null,
                        posId: null,
                        engageForm: '',
                        tiptopDegree: '',
                        specialty: '',
                        school: '',
                        beginDate: '',
                        workState: '在职',
                        workID: '',
                        contractTerm: null,
                        conversionTime: '',
                        notWorkDate: null,
                        beginContract: '',
                        endContract: '',
                        workAge: null,
                        salaryId: '2'
                };
                this.inputDepName = '';
                this.getMaxWordId();
                this.initPositions();
                this.dialogVisible = true;
            },
            sizeChange(size){
                this.size = size;
                this.initEmps();
            },
            currentChange(currentPage){
                this.currentPage = currentPage;
                this.initEmps();
            },
            initEmps(){
                this.loading = true;
                this.getRequest('/employee/basic/?currentPage='+this.currentPage
                    +'&size='+this.size
                    +'&name='+this.empName).then(resp=>{
                    if (resp){
                        this.loading = false;
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
